<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closeAcountDialog" @confirm="confirmAcountDialog">
        <div>
            <table-wrap hideHeader title="角色列表" :total="total"
                :loading="loading" :pageSize="requestData.pageSize" :noSelection="false"
                :pageIndex="requestData.pageIndex" :tableData="tableData" @request-list="getList">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%" :row-key="getRowKeys"
                >
                    <el-table-column prop="id" min-width="140" label="序号"></el-table-column>
                    <el-table-column prop="name" min-width="140" label="站点名称" show-overflow-tooltip></el-table-column>
                </el-table>
        </table-wrap>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import TableWrap from '@/components/table-wrap/table-wrap.vue'
export default {
    components: { DialogComponent, TableWrap },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        account: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const { account } = toRefs(props)
        console.log('account', account, account.value)
        const multipleTable = ref()
        const tableData = ref([{
            id: 1001,
            name: '张三',
            username: 'zhangsan'
        }]);
        const total = ref(0);
        const loading = ref(false)
        const requestData = ref({
            pageIndex: 1,
            pageSize: 20
        })
        const getRowKeys = (row) => {
            return row.id;
        }
        // 列表
        const getList = () => {
            loading.value = true;
            multipleTable.value && multipleTable.value.clearSelection()

            // const {name='', institutionName='', expertise=''} = filterParams.value

            store.dispatch('proxyAction', {
                name: 'listExpertInfo',
                data: {
                    ...requestData.value
                    // ...filterParams.value,
                    // name: name.trim(),
                    // institutionName: institutionName.trim(),
                    // expertise: expertise.trim()
                }
            }).then((res) => {
                tableData.value = res.data.rows || [];
                total.value = res.data.total;
            }).finally(() => {
                loading.value = false;
            })
        }
        // 关闭添加账号对话框
        const closeAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:confirm')
        }
        return {
            multipleTable,
            tableData,
            total,
            loading,
            requestData,
            getList,
            getRowKeys,
            closeAcountDialog,
            confirmAcountDialog
        };
    }
}
</script>
<style lang="scss" scoped>
.w200 {
    width: 200px;
}
.mr0 {
    margin-right: 0;
}
.mt20 {
    margin-top: 20px;
}
.search-input {
    width: 270px;
}
</style>